import React, { Component } from "react";

import "./index.scss";

class MyList extends Component {
  render() {
    const { houseMsgList } = this.props;

    return (
      <div className="MyListWrapper">
        <div className="_list">
          {houseMsgList.list
            ? houseMsgList.list.map((item) => {
                return (
                  <div
                    className="item"
                    key={item.houseImg}
                    onClick={() => {
                      this.props.toHouseDetail(item.houseCode);
                    }}
                  >
                    <img src={`http://localhost:8080${item.houseImg}`} alt="" />

                    <div className="content">
                      <span className="contentTitle">{item.title}</span>
                      <span className="second">{item.desc}</span>
                      <div className="adviceList">
                        {item.tags.map((one, index) => {
                          if (index >= 4) {
                            return "";
                          }
                          return (
                            <div className="adviceItem" key={index}>
                              <span className="adviceText">{one}</span>
                            </div>
                          );
                        })}
                      </div>
                      <span className="price">{item.price}元/月</span>
                    </div>
                  </div>
                );
              })
            : ""}
        </div>
      </div>
    );
  }
}

export default MyList;
